import React from 'react';

export type DividerVariant = 'light' | 'dark' | 'subtle';

interface DividerProps {
  variant?: DividerVariant;
  className?: string;
}

export function Divider({ variant = 'light', className = '' }: DividerProps) {
  const variantStyles = {
    light: "bg-[rgba(255,255,255,0.1)]",
    dark: "bg-[rgba(6,6,6,0.1)]",
    subtle: "bg-[rgba(235,220,207,0.24)]",
  };
  
  return (
    <div className={`h-px w-full ${variantStyles[variant]} ${className}`} />
  );
}

export function SVGDivider({ variant = 'subtle', className = '' }: DividerProps) {
  const strokeColor = {
    light: 'rgba(255, 255, 255, 0.1)',
    dark: 'rgba(6, 6, 6, 0.1)',
    subtle: 'rgba(235, 220, 207, 0.24)',
  };
  
  return (
    <div className={`h-0 w-full ${className}`}>
      <svg className="block w-full h-px" fill="none" preserveAspectRatio="none" viewBox="0 0 100 1">
        <line 
          stroke={strokeColor[variant]} 
          strokeOpacity="0.6" 
          x1="0" 
          y1="0.5" 
          x2="100" 
          y2="0.5" 
        />
      </svg>
    </div>
  );
}